<template>
  <div>
    <!-- 搜索框 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="所属学院">
        <el-select v-model="formInline.region" placeholder="所属学院">
          <el-option
            v-for="(item, index) in collegeName"
            :key="index"
            :value="item.college"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 开题报告区域 -->
    <h1>给开题报告小组的组长分配学生</h1>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.teacher_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学院" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.group_collage }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.group_style }}</span>
        </template>
      </el-table-column>
      <el-table-column label="答辩时间" width="250">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.time | formatedate
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="答辩地点" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.group_address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="组号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.group_num }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 毕业设计答辩区域 -->
    <h1>给毕业答辩小组的组长分配学生</h1>
    <el-table :data="tableData_1" style="width: 100%">
      <el-table-column label="姓名" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.teacher_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学院" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.group_collage }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.group_style }}</span>
        </template>
      </el-table-column>
      <el-table-column label="答辩时间" width="250">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.time | formatedate
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="答辩地点" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.group_address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="组号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.group_num }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit_1(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分配开题答辩学生弹框 -->
    <el-dialog title="学生" :visible.sync="dialogVisible_student" width="30%">
      <el-table
        @selection-change="selection"
        ref="multipleTable"
        :data="tableData_reportstudent"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="姓名" width="120">
          <template slot-scope="scope">{{ scope.row.student_name }}</template>
        </el-table-column>
        <el-table-column label="学号" width="120">
          <template slot-scope="scope">{{ scope.row.student_num }}</template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection()">确认选择</el-button>
      </div>
    </el-dialog>

    <!-- 分配毕业设计答辩学生弹框 -->
    <el-dialog title="学生" :visible.sync="dialogVisible_paper" width="30%">
      <el-table
        @selection-change="selection"
        ref="multipleTable"
        :data="tableData_paperstudent"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="姓名" width="120">
          <template slot-scope="scope">{{ scope.row.student_name }}</template>
        </el-table-column>
        <el-table-column label="学号" width="120">
          <template slot-scope="scope">{{ scope.row.student_num }}</template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="trueSelection()">确认选择</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  created() {
    this.college_style();
  },
  data() {
    return {
      n: "",
      m: "",
      arr: [],
      formInline: {},
      tableData: [],
      tableData_1: [],
      tableData_reportstudent: [],
      tableData_paperstudent: [],
      dialogVisible_paper: false,
      dialogVisible_student: false,
    };
  },
  filters: {
    formatedate(time) {
      return new Date(time).toLocaleString();
    },
  },
  computed: {
    ...mapState(["collegeName"]),
  },
  methods: {
    // 开题报告编辑按钮
    handleEdit(row) {
      this.tableData_reportstudent = [];
      this.n = row;
      this.get_studentreportinfo(row);
      this.dialogVisible_student = true;
      this.$http
        .post(
          "http://127.0.0.1:8080/bigAdmin/distribution_studentinfo",
          this.$qs.stringify(row)
        )
        .then((res) => {
          if (res.data.status == 0) {
            res.data.data.forEach((val) => {
              this.tableData_reportstudent.forEach((value, index) => {
                if (value.student_num == val.student_num) {
                  this.tableData_reportstudent.splice(index, 1);
                }
              });
            });
          } else {
            // console.log(22);
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 论文答辩编辑按钮
    handleEdit_1(row) {
      this.tableData_paperstudent = [];
      this.get_studentPaperinfo(row);
      this.m = row;
      this.dialogVisible_paper = true;
      this.$http
        .post(
          "http://127.0.0.1:8080/bigAdmin/distribution_studentinfo",
          this.$qs.stringify(row)
        )
        .then((res) => {
          if (res.data.status == 0) {
            // console.log(33);
            res.data.data.forEach((val) => {
              this.tableData_paperstudent.forEach((value, index) => {
                if (value.student_num == val.student_num) {
                  this.tableData_paperstudent.splice(index, 1);
                }
              });
            });
          } else {
            // console.log(44);
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 开题报告确认选择按钮
    toggleSelection() {
      const ob = [this.arr, this.n];
      this.$http
        .post(
          "http://127.0.0.1:8080/minAdmin/distribution_student",
          this.$qs.stringify(ob)
        )
        .then((res) => {
          if (res.data.status == 0) {
            this.dialogVisible_student = false;
            this.$message.success(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    // 毕业答辩的确认按钮
    trueSelection() {
      const ob = [this.arr, this.m];
      this.$http
        .post(
          "http://127.0.0.1:8080/minAdmin/distribution_paper",
          this.$qs.stringify(ob)
        )
        .then((res) => {
          if (res.data.status == 0) {
            this.dialogVisible_paper = false;
            this.$message.success(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    // 弹出框的多选文本框选中的信息
    selection(val) {
      // console.log(val);
      this.arr = val;
    },

    // 获取开题答辩小组组长的信息
    get_groupTeacher() {
      this.$http
        .post(
          "http://127.0.0.1:8080/bigAdmin/get_groupTeacher",
          this.$qs.stringify(this.formInline)
        )
        .then((res) => {
          this.tableData = res.data.data;
          // console.log(res);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    // 获取毕设答辩小组的信息
    get_groupteacher() {
      this.$http
        .post(
          "http://127.0.0.1:8080/bigAdmin/groupteacher",
          this.$qs.stringify(this.formInline)
        )
        .then((res) => {
          console.log(res);
          this.tableData_1 = res.data.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    // 获取能够参与开题答辩的学生信息
    get_studentreportinfo(row) {
      this.$http
        .post(
          "http://127.0.0.1:8080/bigAdmin/get_studentreportinfo",
          this.$qs.stringify(row)
        )
        .then((res) => {
          if (res.data.status == 0) {
            // console.log(11);
            this.tableData_reportstudent = res.data.data;
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    // 获取能够参与论文答辩的学生信息
    get_studentPaperinfo(row) {
      // console.log(row);
      this.$http
        .post(
          "http://127.0.0.1:8080/bigAdmin/get_studentPaperinfo",
          this.$qs.stringify(row)
        )
        .then((res) => {
          if (res.data.status == 0) {
            // console.log(11);
            this.tableData_paperstudent = res.data.data;
          } else {
            // console.log(111);
          }
        })
        .catch((err) => {
          console.log(22);
          this.$message.error(err);
        });
    },

    //查询按钮
    onSubmit() {
      this.get_groupTeacher();
      this.get_groupteacher();
    },

    //获取所有学院的种类
    college_style() {},
  },
};
</script>
<style lang="less" scoped>
</style>
